<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>
        var screenWidth = document.documentElement.clientWidth;
        layui.use(['table','laydate'], function(){
            var table = layui.table,
                laydate = layui.laydate;

            laydate.render({
                elem: '#begin-date'

            });
            laydate.render({
                elem: '#end-date'

            });

            table.render({
                id:'tableAll'
                ,elem: '#test'//绑定表格
                //数据来源
                ,url:'/getMyApplications'//绑定数据来源
                ,toolbar: '#toolbarDemo'//绑定三个按钮
                ,title: '我的出差申请表'
                ,page: true
                ,width:screenWidth
                ,cellMinWidth:60
                ,defaultToolbar: []//筛选，打印，导出（之后会删掉）'filter', 'print', 'exports'
                ,where : {
                    supplierName :'',
                    node : '',
                    planTravelDate : '',
                    beginTime:'',
                    endTime:''
                }
                ,cols: [
                    [
                        {field:'numbering', title:'编号',  fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                        ,{field:'addTime', title:'申请日期',  edit: 'text', sort: true,templet:'<div>{{ layui.util.toDateString(d.addTime, "yyyy-MM-dd") }}</div>'}
                        ,{field:'planTravelDate', title:'出差时间', minWidth:250, edit: 'text', templet:'<div>{{ layui.util.toDateString(d.planTravelDate, "yyyy-MM-dd") }}——{{ layui.util.toDateString(d.planEndDate, "yyyy-MM-dd") }}</div>'}
                        ,{field:'supplierName', title:'客户',  sort: true,  templet: '<div>{{d.supplier.name}}</div>'}
                        ,{field:'staffName', title:'申请人',  sort: true,  templet:'<div>{{d.staff.name}}</div>'}
                        ,{field:'travelNumber', title:'随行人数'}
                        ,{field:'processNode.node', title:'结点',  templet:'#nodebar'}
                        ,{field:'planMoney', title:'计划金额'}
                        ,{fixed: 'right', title:'操作',minWidth:200, toolbar: '#barDemo'}
                    ]
                ]
            });
            //条件查询
            $('#searchBtn').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });

            $('#searchwill').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : 4,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchdoing').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : 5,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchdone').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : 8,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#reset').on('click', function() {
                window.location.reload();
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : null,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchinweek').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        planTravelDate : '1990-1-1',
                        node : null,
                        supplierName : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'goApplicationTemplate':
                        window.location = '/business-trip/application';
                };
            });


            //监听工具条 'tool(test)'要手动修改 tool是和  test是和table的lay-filter属性绑定
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    parent.layer.open({
                        title:'出差申请',
                        type:2,
                        content:'/business-trip/applicationDetails?id='+data.id,
                        area: ['1200px', '600px'],

                        shade: [0.3, '#393D49'],
                        shadeClose:false,
                        moveOut:true,
                    })
                }else if(obj.event === 'log'){
                    window.location.href="/approve/travelLog?id="+data.id;
                }
                else if(obj.event == 'businessTripSummary'){
                    window.location.href="/approve/summary?id="+data.id;
                }else if(obj.event == 'administrativeReimbursementApplication'){
                    window.location.href='/reimbursement/administrativeReimbursementApplication?dictionaryId=20&detailsId='+data.id+'&pastId=';
                }
            });


        });
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours() + seperator2
                + date.getMinutes() + seperator2 + date.getSeconds();
            return currentdate;
        }
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="goApplicationTemplate">新建出差申请</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
        {{# if(d.processNode.node === 5 ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="log">出差日志</a>
        {{# } }}
        {{# if(d.processNode.node === 6 ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="businessTripSummary">出差总结</a>
        {{# } }}
        {{# if(d.processNode.node === 7 ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="businessTripSummary">确认完成</a>
        {{# } }}

        {{# if(d.processNode.node == 8 ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="administrativeReimbursementApplication">申请报销</a>
        {{# } }}

    </script>
    <script type="text/html" id="nodebar">
        {{# if(d.processNode.node == 0 ){ }}
        <div>驳回</div>
        {{# } }}
        {{# if(d.processNode.node == 1 ){ }}
        <div>待审批</div>
        {{# } }}
        {{# if(d.processNode.node == 2 ){ }}
        <div>待审批</div>
        {{# } }}
        {{# if(d.processNode.node == 3 ){ }}
        <div>待审批</div>
        {{# } }}
        {{# if(d.processNode.node == 4 ){ }}
        <div>待出发</div>
        {{# } }}
        {{# if(d.processNode.node == 5 ){ }}
        <div>出差中</div>
        {{# } }}
        {{# if(d.processNode.node == 6 ){ }}
        <div>提交总结</div>
        {{# } }}
        {{# if(d.processNode.node == 7 ){ }}
        <div>待完成</div>
        {{# } }}
        {{# if(d.processNode.node == 8 ){ }}
        <div>已完成</div>
        {{# } }}
    </script>
</head>
<body>
    <form>
<!--        搜索客户：-->
<!--        <div class="layui-inline">-->
<!--            <input class="layui-input" name="id" id="demoReload" autocomplete="off">-->
<!--        </div>-->
        时间:
        <div class="layui-input-inline">
            <input type="text" th:autocomplete="off"  name="beginDate" id="begin-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div> ——
        <div class="layui-input-inline">
            <input type="text" th:autocomplete="off"  name="endDate" id="end-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
        <button class="layui-btn" id="searchBtn">搜索</button>
<!--        <button class="layui-btn" id="searchapproval">待审批</button>-->
        <button class="layui-btn" id="searchwill">待出发</button>
        <button class="layui-btn" id="searchdoing">正在进行</button>
        <button class="layui-btn" id="searchdone">已完成</button>
        <button class="layui-btn" id="searchinweek">查看本周</button>
        <button class="layui-btn" type="reset" id="reset">重置</button>
    </form>

    <table class="layui-hide" id="test" lay-filter="test"></table>
</body>
</html>